<template>
    <div class="student-info">
        <h4>个人信息</h4>
        <div class="info-row">
            <label for="name" class="info-label">姓名:</label>
            <input type="text" id="name" class="info-input" v-model="name" />
        </div>
        <div class="info-row">
            <label for="studentId" class="info-label">工号:</label>
            <input type="text" id="studentId" class="info-input" v-model="teacherId" />
        </div>
        <div style="text-align: center; color: red;" v-if="error_message != null && current == '1'">{{ error_message }}</div>
        <div class="info-row">
            <button type="button" class="btn btn-primary" @click="clickUpload">更新信息</button>
        </div>

        <div class="info-row">
            <label for="student" class="info-label">添加学生:</label>
            <select class="form-select" v-model="selectedOption">
                <option selected>选择添加方式</option>
                <option value="grade">按班级添加</option>
                <option value="studentId">按学号添加</option>
            </select>
            <input type="text" id="student" class="info-input" :placeholder="placeholder"  v-model="searchQuery" />
        </div>
        <div style="text-align: center; color: red;" v-if="error_message != null && current == '2'">{{ error_message }}</div>
        <div class="info-row">
            <button type="button" class="btn btn-primary" @click="clickAddStudent">添加学生</button>
        </div>

        <!-- Success Modal -->
        <div class="modal" id="update-info" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content" style="border-radius: 8px; text-align: center;">
                <!-- 提示信息 -->
                <div class="modal-body" style="font-size: 18px; font-weight: bold; color: #555; margin: 20px 0;">
                    信息更新成功
                </div>
                <!-- 确认按钮 -->
                <div class="modal-footer" style="border-top: none; justify-content: center; padding-bottom: 20px;">
                    <button type="button" class="btn btn-success" data-bs-dismiss="modal" style="background-color: #28a745; border: none; padding: 10px 20px;">
                    OK
                    </button>
                </div>
                </div>
            </div>
        </div>

        <!-- Success Modal -->
        <div class="modal" id="add-student" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content" style="border-radius: 8px; text-align: center;">
                <!-- 提示信息 -->
                <div class="modal-body" style="font-size: 18px; font-weight: bold; color: #555; margin: 20px 0;">
                    添加学生成功
                </div>
                <!-- 确认按钮 -->
                <div class="modal-footer" style="border-top: none; justify-content: center; padding-bottom: 20px;">
                    <button type="button" class="btn btn-success" data-bs-dismiss="modal" style="background-color: #28a745; border: none; padding: 10px 20px;">
                    OK
                    </button>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import { Modal } from 'bootstrap/dist/js/bootstrap';    // 引入Modal的API
import { computed } from 'vue';

const store = useStore();
const name = ref("");
const teacherId = ref("");
const error_message = ref(null);
const current = ref(null);

const selectedOption = ref('选择添加方式');  // 选择框的绑定值
const searchQuery = ref(null);           // 搜索框的绑定值
const placeholder = computed(() => {
    if (selectedOption.value == "grade") {
        return "例如：22计科3班";
    }
    return "请输入";
})

const clearMessage = () => {
    error_message.value = null;
    current.value = null;
}

const clickUpload = () => {
    error_message.value = null;
    $.ajax({
        url: "http://localhost:3000/api/teacher/update-info",
        type: "POST",
        data: {
            name: name.value,
            teacherId: teacherId.value,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                name.value = resp.name;
                teacherId.value = resp.teacherId;
                const modalElement = document.getElementById('update-info');
                const modal = new Modal(modalElement);
                modal.show(); // 打开模态框
            } else {
                error_message.value = resp.error_message;
                current.value = '1';
                setTimeout(clearMessage, 3000);
            }
            
        },
        error(resp) {
            console.log(resp);
        }
    })
}

const getInfo = () => {
    $.ajax({
        url: "http://localhost:3000/api/teacher/get-info",
        type: "GET",
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                name.value = resp.name;
                teacherId.value = resp.teacherId;
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
}
getInfo();

const clickAddStudent = () => {
    error_message.value = null;
    $.ajax({
        url: "http://localhost:3000/api/teacher/add-student",
        type: "POST",
        data: {
            selectedOption: selectedOption.value,
            searchQuery: searchQuery.value
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                const modalElement = document.getElementById('add-student');
                const modal = new Modal(modalElement);
                modal.show(); // 打开模态框
            }
            else {
                error_message.value = resp.error_message;
                current.value = '2';
                setTimeout(clearMessage, 3000);
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
}

</script>

<style scoped>
.student-info {
    display: flex; 
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 100%;
}

.info-row {
    display: flex;
    align-items: center; /* 确保 label 和 input 垂直居中 */
    justify-content: center;
    gap: 15px;
}

.info-label {
    font-weight: bold;
    width: 80px;
    text-align: right;
}

.info-input {
    flex: 1;
    max-width: 300px; /* 限制输入框最大宽度 */
    padding: 10px; /* 增加内边距使其更美观 */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}

.btn {
    padding: 8px 15px; /* 调整按钮内边距 */
    font-size: 14px; /* 提高按钮文字的可读性 */

}

.form-select {
    width: 150px;
    padding: 10px; /* 增加内边距使其更美观 */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}

</style>
